<template>
    <div class="overview">
        <div style="position: fixed;width: 100%;background: #fff;z-index: 99;">
            <bar text="经营总览"></bar>
        </div>
        <div class="overviewBox">
            <template>
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane class="topNva" label="流量概览" name="first">
                        <div style="width: 100%;height: 100%;padding-bottom: 60px;">
                            <!--业态占比-->
                            <div class="proportion">
                                <titles style="margin-left: 15px;" text="业态占比"></titles>
                                <div id="myChart" :style="{width: '300px', height: '300px',margin:'0 auto'}">

                                </div>

                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane class="topNva" label="经营报告" name="second">配置管理</el-tab-pane>
                    <el-tab-pane class="topNva" label="流量分布" name="third">角色管理</el-tab-pane>
                </el-tabs>
            </template>
        </div>
    </div>
</template>

<script>
    import titles from "../../components/titleBar";
    import bar from "../../components/topBar";
    // 导入chart.vue子组件
    export default {
        props: {},
        components: {
            titles,
            bar,
        },
        data() {
            return {
                activeName: 'first'
            };
        },
        name: "overview",
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },
            drawLine(){
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('myChart'))
                // 绘制图表
                myChart.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    color:['#5A8DFF','#FF8C8C','#FFE19B'],
                    legend: {
                        // orient: 'vertical',
                        // x: 'left',
                        // data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']
                    },
                    series: [

                        {
                            name:'访问来源',
                            type:'pie',
                            radius: ['40%', '55%'],
                            label: {
                                normal: {



                                }
                            },
                            data:[
                                {value:335, name:'服装'},
                                {value:310, name:'娱乐'},
                                {value:234, name:'餐饮'}
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                });
            }
        },
        mounted() {
            this.drawLine();
        }
    }
</script>

<style scoped lang="scss">
    /deep/#myChart{
        min-width: 300px;
        /*margin-right: 20px;*/
    }
    p{
        text-align: left;
    }
    /deep/.el-tabs--top .el-tabs__item.is-top:nth-child(2){
        padding-left: 30px;
        padding-right: 0;
        font-size: 15px;
        /*color: #999999;*/
    }
    /deep/.el-tabs__item{
        padding: 0 68px;
        font-size: 15px;
        color: #999999;
    }
    /deep/.el-tabs__item.is-top:last-child{
        padding: 0;
        font-size: 15px;
        color: #999999;
    }
    /deep/.el-tabs__item.is-top:last-child:hover{
        color: #409EFF;
    }
    /deep/.el-tabs__item.is-top:nth-child(2):hover{
        color: #409EFF;
    }
    /deep/.el-tabs__active-bar{
        height: 3px;
        background: #3B78FF;
    }
    /deep/.el-tabs__nav{
        display: flex;
        width: 100%;
    }
    .topNva{
        flex: 1;
        text-align: center;
    }
.overview{
    .overviewBox{
        padding-top: 62px;
    }
}
</style>